<template>
	<view class="detail">
		<view class="guanjia" v-if="info.guanjiaData.id">
			<view class="title">服务管家</view>
			<view class="acea-row row-between-wrapper mt30">
				<view class="acea-row row-middle">
					<view class="">
						<image class="avatar" :src="info.guanjiaData.avatar" mode=""></image>
					</view>
					<view class="ml20">
						<view class="bold fs-40 color333">{{ info.guanjiaData.real_name }}</view>
						<view class="color888 fs-38 mt30">性别：{{ info.guanjiaData.sex?'男':'女' }}</view>
					</view>
				</view>
				<view class="btn" @click="callphone(info.guanjiaData.phone)">联系管家</view>
			</view>
		</view>
		
		<view class="item mt30">
			<view class="acea-row row-middle bor-bot pb30">
				<view class="pictrue">
					<image class="imgwh" :src="info.shopData.images[0]" mode="aspectFit"></image>
				</view>
				<view class="ml30 flexw">
					<view class="color333 fs-40 bold">{{ info.shopData.title }}</view>
					<view class="mt20 themecolor fs-28">{{ info.statusName }}</view>
				</view>
			</view>
			<block v-for="(item,index) in info.otherData" :key="index">
				<view class="color333 fs-32 mt30">{{ item.title }}：{{ item.quantity_num }}{{ item.danwei }}</view>
			</block>
		</view>
		
		<view class="address color333">
			<view class="color333 fs-36">预约信息</view>
			<view class="acea-row row-between-wrapper bor-bot py30 fs-32">
				<view>姓名</view>
				<view>{{ info.real_name }}</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot py30 fs-32">
				<view>联系方式</view>
				<view>{{ info.user_phone }}</view>
			</view>
			<view class="mt30">
				<view class="color333 fs-36">详细地址</view>
				<view class="address-info mt20">
					{{ info.user_address }}
				</view>
			</view>
		</view>
		
		<view class="serve-bill" @click="godetail">服务记录</view>
		
		
	</view>
</template>

<script>
	import{
		orderDetails
	} from '@/api/order.js'
	export default {
		data() {
			return {
				id:'',
				info:[],
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getdetail();
		},
		methods:{
			godetail(){
				uni.navigateTo({
					url: '/pages/package/serve-bill?id=' + this.id
				})
			},
			callphone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getdetail(){
				orderDetails({ id : this.id }).then(res=>{
					this.info = res.data.data;
				}).catch(err=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		padding: 30rpx;
		
		.address{
			width: 690rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			
			.address-info{
				width: 630rpx;
				height: 140rpx;
				background-color: #F5F5F5;
				border-radius: 15rpx;
				padding: 20rpx;
			}
		}
		
		.guanjia{
			width: 690rpx;
			// height: 356rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 30rpx;
			
			.title{
				border-bottom: 2rpx solid #FD7D36;
				padding-bottom: 30rpx;
				color: #FD7D36;
				font-size: 36rpx;
			}
			.avatar{
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}
			.btn{
				background: rgba(253, 125, 54, 0.2);
				width: 208rpx;
				height: 68rpx;
				line-height: 68rpx;
				color: #FD7D36;
				border-radius: 34rpx;
				text-align: center;
			}
		}
		
		.item{
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-bottom: 30rpx;
			
			.pictrue{
				width: 176rpx;
				height: 176rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
		
		.serve-bill{
			width: 690rpx;
			height: 104rpx;
			text-align: center;
			line-height: 104rpx;
			border-radius: 30rpx;
			background: rgba(253, 125, 54, 0.2);
			color: #FD7D36;
			font-size: 32rpx;
			margin: 50rpx auto;
		}
		
	}
</style>
